<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简化React测试</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }
      
      #root {
        width: 100vw;
        height: 100vh;
      }
      
      #fallback {
        display: none;
        padding: 40px;
        text-align: center;
        font-family: Arial, sans-serif;
        background: #fff7e6;
        border: 1px solid #ffe58f;
        margin: 20px;
        border-radius: 8px;
        color: #faad14;
      }
      
      .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="loading">
        <div>
          <h2>🚀 正在加载React应用...</h2>
          <p>请稍候，应用正在初始化中</p>
        </div>
      </div>
    </div>
    
    <div id="fallback">
      <h2>⚠️ React应用加载超时</h2>
      <p>如果长时间看到此消息，可能存在以下问题：</p>
      <ul style="text-align: left; display: inline-block;">
        <li>JavaScript执行错误</li>
        <li>网络连接问题</li>
        <li>浏览器兼容性问题</li>
        <li>React组件渲染失败</li>
      </ul>
      <p>请打开浏览器控制台查看详细错误信息</p>
      <button onclick="window.location.reload()" style="
        background: #faad14;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        margin: 5px;
      ">重新加载</button>
      <button onclick="window.location.href='/console-debug.html'" style="
        background: #1890ff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        margin: 5px;
      ">打开调试工具</button>
    </div>
    
    <script>
      console.log('页面开始加载...');
      
      // 如果React应用在5秒内没有渲染，显示fallback内容
      const fallbackTimer = setTimeout(() => {
        console.warn('React应用加载超时，显示fallback内容');
        const root = document.getElementById('root');
        const fallback = document.getElementById('fallback');
        
        if (root && (!root.hasChildNodes() || root.innerHTML.includes('正在加载React应用'))) {
          console.error('React应用未能正常渲染');
          fallback.style.display = 'block';
        }
      }, 5000);
      
      // 监听React应用成功渲染
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === 'childList') {
            const root = document.getElementById('root');
            if (root && !root.innerHTML.includes('正在加载React应用')) {
              console.log('React应用渲染成功');
              clearTimeout(fallbackTimer);
              observer.disconnect();
            }
          }
        });
      });
      
      observer.observe(document.getElementById('root'), {
        childList: true,
        subtree: true
      });
      
      // 捕获全局错误
      window.addEventListener('error', (event) => {
        console.error('全局错误:', event.error);
        const fallback = document.getElementById('fallback');
        if (fallback) {
          fallback.innerHTML += `<div style="margin-top: 15px; padding: 10px; background: #fff2f0; border: 1px solid #ffccc7; border-radius: 4px; color: #ff4d4f;">错误: ${event.error?.message || event.message}</div>`;
          fallback.style.display = 'block';
        }
      });
      
      window.addEventListener('unhandledrejection', (event) => {
        console.error('未处理的Promise拒绝:', event.reason);
        const fallback = document.getElementById('fallback');
        if (fallback) {
          fallback.innerHTML += `<div style="margin-top: 15px; padding: 10px; background: #fff2f0; border: 1px solid #ffccc7; border-radius: 4px; color: #ff4d4f;">Promise错误: ${event.reason}</div>`;
          fallback.style.display = 'block';
        }
      });
    </script>
    
    <!-- 使用简化版的main.jsx -->
    <script type="module" src="/src/main-simple.jsx"></script>
  </body>
</html>